<template>
  <div class="editGroup">
    <div class="field-wrap">
      <div class="field-tit">群组名称:</div>
      <div class="field-bd">
        {{groupDetail.name}}
      </div>
    </div>
    <div class="field-wrap">
      <div class="field-tit">群组类型:</div>
      <div class="field-bd">
        {{groupDetail.groupType===1?'动态群组':'静态群组'}}
      </div>
    </div>
    <div class="field-wrap">
      <div class="field-tit">群组成员:</div>
      <div class="field-bd">
        <el-button type="text" @click="showGroupCus">共{{groupDetail.customerType==1?groupDetail.customerNum:groupDetail.buyerNum}}个成员</el-button>
      </div>
    </div>
    <div class="field-wrap">
      <div class="field-tit">建立时间:</div>
      <div class="field-bd">
        {{groupDetail.createTime}}
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    data () {
      return {
        groupName: '',
        visible: false,
        isSaving: false
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        groupDetail: state => state.cusManage.groupDetail
      }),
      conditions () {
        let conditionStr = this.groupDetail.condition
        if (conditionStr) {
          return JSON.parse(conditionStr)
        }
      }
    },
    methods: {
      ...mapActions(['getGroupDetail', 'editDynamicGroup', 'editGroupName']),
      // 初始化页面数据
      initPageData () {
        let id = this.$route.params.gid
        this.getGroupDetail(id)
          .then(() => {
            this.groupName = this.groupDetail.name
          })
      },
      // 跳转至会员列表页面
      showGroupCus () {
        this.$router.push({
          name: 'Customers',
          params: {
            showHistory: true,
            initData: {
              groupId: this.groupDetail.id
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .editGroup{
    .field-wrap{margin-bottom:15px;}
    .field-tit{float:left;width:80px;height:36px;line-height:36px;font-size:14px;text-align:right}
    .field-bd{margin-left:95px;height:36px;line-height:36px;font-size:14px;}
    .dialog-condition{width: 70%}
  }
</style>
